<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <canvas  id="can1" width="1000" height="800"></canvas>


    <script>
         var can = document.querySelector("#can1");
         var ctx = can.getContext("2d")
         console.log(ctx)
    
        // 绘制图形
        ctx.rect(300,300,200,200)
        
        // 填充
        ctx.fillStyle = "red";
        ctx.fill()

        // 描边
        ctx.lineWidth = 10;
        ctx.strokeStyle = "yellow";
        ctx.stroke();
        

        // 绘制线段
        ctx.beginPath();   
        ctx.moveTo(100, 100);
        ctx.lineTo(350, 350);
        ctx.lineTo(500, 0);
        ctx.lineTo(300, 200);
        ctx.closePath()
       
        ctx.lineCap="miter";
        ctx.lineJoin="miter";
        ctx.miterLimit = 0.2
       
        ctx.strokeStyle = "yellow";
        ctx.lineWidth = 10
        ctx.stroke()

        ctx.closePath()

        // 绘制圆
        ctx.lineWidth = 2
        ctx.moveTo(600,600)
        ctx.arc(600,600,100,0,Math.PI)
        ctx.fillStyle = "red";
        ctx.fill()

     //   ctx.strokeStyle = "blue";
        ctx.stroke()

 
         

    </script>
    
</body>
</html>